<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flag挑战</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1543857778-c4a1a569e7bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80');
            background-size: cover;
            background-position: center;
            opacity: 0.15;
            z-index: -1;
        }

        .container {
            width: 90%;
            max-width: 900px;
            background: rgba(22, 26, 46, 0.85);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            animation: fadeIn 0.8s ease-out;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        header {
            background: linear-gradient(90deg, #0f3460, #1a1a2e);
            color: white;
            padding: 25px;
            text-align: center;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%);
            pointer-events: none;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
            background: linear-gradient(90deg, #e94560, #f9b572);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 1px;
        }

        .subtitle {
            font-size: 1.1rem;
            opacity: 0.8;
            position: relative;
            z-index: 2;
            color: #b8c1ec;
            margin-top: 8px;
        }

        .content {
            display: flex;
            padding: 30px;
            gap: 30px;
            position: relative;
        }

        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
        }

        .image-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            position: relative;
        }

        .image-frame {
            width: 100%;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
            border: 3px solid rgba(233, 69, 96, 0.3);
            position: relative;
            transition: all 0.5s ease;
            background: rgba(15, 52, 96, 0.3);
            height: 350px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .image-frame:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(233, 69, 96, 0.25);
            border-color: rgba(233, 69, 96, 0.5);
        }

        .image-frame img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            transition: transform 0.5s ease;
        }

        .image-caption {
            background: rgba(15, 52, 96, 0.5);
            padding: 12px 20px;
            border-radius: 10px;
            font-size: 1.1rem;
            color: #f9b572;
            font-weight: 500;
            text-align: center;
            width: 100%;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            border: 1px solid rgba(249, 181, 114, 0.2);
        }

        .answer-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .question-number {
            background: linear-gradient(135deg, #e94560, #f9b572);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 1.2rem;
            box-shadow: 0 4px 10px rgba(233, 69, 96, 0.3);
        }

        .question-text {
            font-size: 1.8rem;
            font-weight: 600;
            color: #f9b572;
            line-height: 1.4;
            margin-bottom: 25px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .input-group {
            margin: 25px 0;
            position: relative;
        }

        .input-container {
            display: flex;
            align-items: center;
            background: rgba(15, 52, 96, 0.5);
            border-radius: 50px;
            padding: 5px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            border: 2px solid rgba(184, 193, 236, 0.3);
            transition: all 0.3s ease;
        }

        .input-container:focus-within {
            border-color: #e94560;
            box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.3);
        }

        .input-container i {
            font-size: 1.5rem;
            color: #f9b572;
            margin: 0 15px;
        }

        input {
            flex: 1;
            padding: 15px 20px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            outline: none;
            background: rgba(22, 26, 46, 0.7);
            color: #b8c1ec;
            transition: all 0.3s ease;
        }

        input::placeholder {
            color: #7a84c0;
        }

        input:focus {
            color: white;
        }

        .submit-btn {
            background: linear-gradient(90deg, #e94560, #d7385e);
            color: white;
            border: none;
            padding: 15px 35px;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 15px;
            width: 100%;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(233, 69, 96, 0.4);
            position: relative;
            overflow: hidden;
        }

        .submit-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: 0.5s;
        }

        .submit-btn:hover::before {
            left: 100%;
        }

        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(233, 69, 96, 0.6);
        }

        .submit-btn:active {
            transform: translateY(-1px);
        }

        .result-container {
            padding: 0 30px 30px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.6s ease;
        }

        .result-container.show {
            max-height: 200px;
        }

        .result-box {
            background: linear-gradient(90deg, rgba(46, 163, 77, 0.7), rgba(39, 174, 96, 0.8));
            color: white;
            padding: 25px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
            animation: fadeIn 0.5s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .result-icon {
            font-size: 2.5rem;
            margin-right: 20px;
            animation: pulse 1.5s infinite;
            color: #a9f1df;
        }

        .result-text {
            font-size: 1.3rem;
            font-weight: 600;
            flex: 1;
            color: #e8f6ef;
        }

        .result-text .flag {
            background: rgba(0, 0, 0, 0.3);
            padding: 5px 15px;
            border-radius: 8px;
            margin: 0 5px;
            font-family: 'Courier New', monospace;
            font-weight: bold;
            letter-spacing: 1px;
            color: #a9f1df;
        }

        .next-btn {
            background: linear-gradient(90deg, #e94560, #d7385e);
            color: white;
            border: none;
            padding: 15px 35px;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 20px auto 0;
            box-shadow: 0 5px 15px rgba(233, 69, 96, 0.4);
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
        }

        .next-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: 0.5s;
        }

        .next-btn:hover::before {
            left: 100%;
        }

        .next-btn.show {
            opacity: 1;
            transform: translateY(0);
        }

        .next-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 20px rgba(233, 69, 96, 0.6);
        }

        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle var(--duration) linear infinite;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.1; }
            50% { opacity: 1; }
        }

        @keyframes confettiFall {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
            20%, 40%, 60%, 80% { transform: translateX(8px); }
        }
    </style>
</head>
<body>
    <div class="stars" id="stars"></div>

    <div class="container">
        <header>
            <h1><i class="fas fa-dream"></i> 空梦挑战</h1>
            <p class="subtitle">观察图片，在虚幻中寻找真实</p>
        </header>

        <div class="content">
            <div class="image-container">
                <div class="image-frame">
                    <img src="/images/空梦.png" alt="空梦挑战图片" id="challengeImage">
                </div>
                <div class="image-caption">
                    仔细观察图片内容，输入正确的关键词
                </div>
            </div>

            <div class="answer-section">
                <div class="question-header">
                    <div class="question-number">2</div>
                    <div style="font-weight: 500; color: #b8c1ec;">梦境探索</div>
                </div>

                <div class="question-text">
                    在幻境中寻觅真实，解开空梦的谜题：
                </div>

                <div class="input-group">
                    <div class="input-container">
                        <i class="fas fa-moon"></i>
                        <input type="text" id="answerInput" placeholder="在此输入答案">
                    </div>
                    <button class="submit-btn" onclick="checkAnswer()">
                        <i class="fas fa-paper-plane"></i> 提交答案
                    </button>
                </div>

                <button class="next-btn" id="nextLevelBtn" onclick="goNext()">
                    <i class="fas fa-arrow-right"></i> 下一梦境
                </button>
            </div>
        </div>

        <div class="result-container" id="resultContainer">
            <div class="result-box">
                <div class="result-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="result-text" id="resultContent">
                    正确：Flag为 <span class="flag" id="flagContent">等待验证...</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 创建星空背景
        function createStars() {
            const starsContainer = document.getElementById('stars');
            const starCount = 100;

            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.classList.add('star');

                // 随机位置和大小
                const size = Math.random() * 3;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                star.style.left = `${Math.random() * 100}%`;
                star.style.top = `${Math.random() * 100}%`;

                // 随机动画参数
                const duration = 2 + Math.random() * 5;
                const delay = Math.random() * 5;
                star.style.setProperty('--duration', `${duration}s`);
                star.style.animationDelay = `${delay}s`;

                starsContainer.appendChild(star);
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            createStars();

            const answerInput = document.getElementById('answerInput');
            const resultContainer = document.getElementById('resultContainer');
            const flagContent = document.getElementById('flagContent');
            const nextBtn = document.getElementById('nextLevelBtn');
            const challengeImage = document.getElementById('challengeImage');

            // 输入框聚焦时添加动画
            answerInput.addEventListener('focus', function() {
                this.parentElement.style.boxShadow = '0 4px 20px rgba(233, 69, 96, 0.3)';
                this.parentElement.style.borderColor = '#e94560';
            });

            answerInput.addEventListener('blur', function() {
                this.parentElement.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.3)';
                this.parentElement.style.borderColor = 'rgba(184, 193, 236, 0.3)';
            });

            // 添加图片悬停效果
            challengeImage.addEventListener('mouseenter', function() {
                this.style.transform = 'scale(1.05)';
            });

            challengeImage.addEventListener('mouseleave', function() {
                this.style.transform = 'scale(1)';
            });
        });

        function checkAnswer() {
            const answer = document.getElementById('answerInput').value.trim();
            const resultContainer = document.getElementById('resultContainer');
            const flagContent = document.getElementById('flagContent');
            const nextBtn = document.getElementById('nextLevelBtn');

            if (!answer) {
                flagContent.textContent = '请输入答案';
                resultContainer.classList.add('show');
                return;
            }

            if (answer.toLowerCase() === '空梦') {
                // 显示结果
                flagContent.textContent = 'f0f8c0474ff22eb748f4bc62087c72c7';
                resultContainer.classList.add('show');

                // 显示下一关按钮
                setTimeout(() => {
                    nextBtn.classList.add('show');
                }, 500);

                // 添加庆祝效果
                createConfetti();
            } else {
                flagContent.textContent = '答案错误，请继续加油';
                resultContainer.classList.add('show');

                // 错误提示动画
                const inputContainer = document.querySelector('.input-container');
                inputContainer.style.animation = 'shake 0.5s';
                setTimeout(() => {
                    inputContainer.style.animation = '';
                }, 500);
            }
        }

        function goNext() {
            // 跳转到下一关
            window.location.href = "index2.html";
        }

        function createConfetti() {
            const container = document.querySelector('.container');
            const confettiCount = 50;
            const confettiIcons = ['✨', '🌟', '💫', '🌙', '⭐', '☄️', '🌠', '🔮'];

            for (let i = 0; i < confettiCount; i++) {
                const confetti = document.createElement('div');
                confetti.innerHTML = confettiIcons[Math.floor(Math.random() * confettiIcons.length)];
                confetti.style.position = 'absolute';
                confetti.style.fontSize = '24px';
                confetti.style.left = Math.random() * 100 + '%';
                confetti.style.top = '-30px';
                confetti.style.opacity = '0';
                confetti.style.zIndex = '9999';
                confetti.style.animation = `confettiFall ${Math.random() * 3 + 2}s linear forwards`;
                container.appendChild(confetti);

                // 设置随机动画延迟
                confetti.style.animationDelay = Math.random() * 1 + 's';

                // 移除元素
                setTimeout(() => {
                    confetti.remove();
                }, 5000);
            }

            // 添加shake动画
            const style = document.createElement('style');
            style.innerHTML = `
                @keyframes shake {
                    0%, 100% { transform: translateX(0); }
                    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
                    20%, 40%, 60%, 80% { transform: translateX(8px); }
                }
            `;
            document.head.appendChild(style);
        }
    </script>
</body>
</html>